<template>
  <div class="box">
    <div class="title">
      {{ props.header }}
    </div>
    <slot />
  </div>
</template>

<script lang="ts" setup>
defineOptions({
  name: "CardBox",
});
const props = defineProps({
  header: String,
});
</script>
<style scoped lang="scss">
.box {
  border: 1px solid sandybrown;
  border-radius: 3px;
  position: relative;
  padding: 20px;

  .title {
    padding: 10px;
    position: absolute;
    top: -20px;
    left: 10px;
    overflow: hidden;
    background: #fff;
  }
}
</style>
